<!-- From Uiverse.io by Creatlydev - Tags: button, hover effect, click effect, tailwind, tailwindbutton -->
<button class="shadow shadow-red-300 cursor-pointer overflow-hidden text-white bg-red-600 px-4 py-3 group active:shadow-green-200 focus:outline-none rounded flex items-center justify-center relative gap-4">
  
  <span class="group-hover:-translate-x-40 transition-transform duration-200">REMOVE</span>

  <div class="w-0.5 h-6 bg-red-800 group-hover:-translate-x-40 transition-transform duration-200"></div>

  <div class="svg-wrapper group-hover:-translate-x-11 transition-transform duration-200">
    <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M6 18L18 6M6 6l12 12" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
  </div>

  <div class="svg-wrapper group-active:bg-green-600 group-active:flex hidden absolute w-full h-full flex items-center justify-center">
    <svg class="w-6 h-6" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.5 12.75l6 6 9-13.5" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>

  </div>

</button>

